<template>
  <div id="spaceDataMap-map" style="width:100%;height:658px;"></div>
  <div id="spaceDataMap-mapDiv" class="ol-popup">
    <!-- 显示控件 -->
    <div id="spaceDataMap-setDivPosition"  class="init-setDivPosition">
      <!-- 切换卫星和街道地图 -->
      <p @click="switchMap" class="init-setDivPosition-selected">
        <template v-if="switchMapBool==false">
          <img src="@/assets/map/image/weixing-b.png" title="切换卫星地图"><br/><span>卫星图</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/jiedao-b.png" title="切换街道地图"><br/><span>街道图</span>
        </template>
      </p>
      <!-- 返回主界面 -->
      <p @click="zoomDefaultPosition" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool==true }">
        <img src="@/assets/map/image/newImage/home.png" title="返回主界面"><br/><span>主界面</span>
      </p>
      <!-- 显示工具箱 -->
      <p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox==false }">
        <template v-if="showHideToolsBox">
          <img src="@/assets/map/image/tools.png" title="打开工具箱"><br/><span>工具箱</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/tools.png" title="关闭工具箱"><br/><span>工具箱</span>
        </template>
      </p>
      <!-- 上传 -->
      <p @click="showHideUploadDiv" :class="{ 'init-setDivPosition-selected': showHideUploadDivBool==false }">
        <template v-if="showHideUploadDivBool">
          <img src="@/assets/map/image/newImage/upload.png" title="打开上传面板"><br/><span>上传</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/newImage/upload.png" title="关闭上传面板"><br/><span>上传</span>
        </template>
      </p>
      <!-- 管理 -->
      <p @click="showHideManageDiv" :class="{ 'init-setDivPosition-selected': showHideManageDivBool==false }">
        <template v-if="showHideManageDivBool">
          <img src="@/assets/map/image/newImage/search.png" title="打开管理面板"><br/><span>管理</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/newImage/search.png" title="关闭管理面板"><br/><span>管理</span>
        </template>
      </p>
      <!-- 查询 -->
      <p @click="showHideQueryDiv" :class="{ 'init-setDivPosition-selected': showHideQueryDivBool==false }">
        <template v-if="showHideQueryDivBool">
          <img src="@/assets/map/image/newImage/search.png" title="打开查询面板"><br/><span style="border:0;">查询</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/newImage/search.png" title="关闭查询面板"><br/><span style="border:0;">查询</span>
        </template>
      </p>
    </div>
    <!-- 工具箱 -->
    <div id="spaceDataMap-ToolsBoxDiv" class="init-ToolsBoxDiv">
      <p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool==false }">
        <template v-if="showHideMeasureTool">
          <img title="开启测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
        </template>
        <template v-else>
          <img title="关闭测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
        </template>
      </p>
      <p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool==false }">
        <template v-if="showHidePositionTool">
          <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
        <template v-else>
          <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
      </p>
    </div>
    <!-- 所有工具 -->
    <div id="spaceDataMap-AllToolsDiv" class="init-AllToolsDiv">
      <!-- 测量工具 -->
      <div id="spaceDataMap-MeasureToolsDiv" class="init-AllToolsDivFloat">
        <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool==false }">
          <template v-if="measureDistanceBool">
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool==false }">
          <template v-if="measureAreaBool">
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool==false }">
          <template v-if="stopMeasureBool">
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool==false }">
          <template v-if="clearMeasureBool">
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
        </p>
      </div>
      <!-- 定位工具 -->
      <div id="spaceDataMap-MousePositionDiv">
        <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
        <input id="spaceDataMap-MousePositionLon" type="text" value="">
        <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
        <input id="spaceDataMap-MousePositionLat" type="text" value="">
        <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool==false }">
          <template v-if="clearPositionBool">
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool==false }">
          <template v-if="addPositionBool">
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
        </p>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <!--<div id="spaceDataMap-popup" class="new-ol-popup">
      <a href="#" id="spaceDataMap-popup-closer" class="new-ol-popup-closer"></a>
      <div id="spaceDataMap-popup-content"></div>
    </div>-->
    <!--图层图例-->
    <!--<div id="spaceDataMap-legend" style="position: absolute;right: 5px;bottom: 5px;min-height: 50px;max-height: 275px;background: #fff;padding: 10px;overflow: auto;max-width: 200px;">
    </div>-->
  </div>
</template>
<script>
import '@/assets/map/ol/ol.css';
import { getProjection,getResolutions,getTiandituVecMap,getTiandituVecText,getTiandituImgMap,getTiandituImgText,
  getRESTLayer,getVectorTileLayer,iServerHttp } from "@/map/projMap.js";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import {Cluster, Vector as VectorSource, XYZ} from 'ol/source'
import {Control, defaults as defaultControls} from 'ol/control';
import Overlay from 'ol/Overlay';
import WKT from 'ol/format/WKT';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';
import {Fill, Stroke, Style, Icon, Circle,Text} from 'ol/style';
import {Select, Draw, Modify, Snap, Translate} from 'ol/interaction';
import {getArea, getLength} from 'ol/sphere';
import {unByKey} from 'ol/Observable';
import * as olExtent from 'ol/extent';
import {createBox} from 'ol/interaction/Draw';
import {boundingExtent} from 'ol/extent';
import { TileSuperMapRest,Logo,QueryByGeometryParameters,QueryService } from '@supermap/iclient-ol';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
import hospitalImg from '@/assets/map/image/newImage/hospital.png';

export default {
  name: "SpaceDataMap",
  components: {

  },
  props:{
    showHideDivType: {//显示上传|查询面板
      type:String,
      required:true,
      default:true
    },
    showHideTextLayerBool: {//是否显示文字图层
      type:Boolean,
      required:true,
      default: false
    },
    rkgwLegendSelectData: {//人口建筑物经济公里格网图例选择数据
      type:Array,
      required:true,
      default: []
    },
    xzqhLayerBool: {//行政区划图层显示
      type:Boolean,
      required:true,
      default: false
    },
    xzqhAllData: {//行政区划图层数据
      type:Array,
      required:true,
      default: []
    },
    dxdmGcLayerBool: {//地形地貌（高程）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dxdmGcAllData: {//地形地貌（高程）图层数据
      type:Array,
      required:true,
      default: []
    },
    elevationLegendData: {//地形地貌（高程）图层图例
      type:Array,
      required:true,
      default: []
    },
    dxdmPdLayerBool: {//地形地貌（坡度）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dxdmPdAllData: {//地形地貌（坡度）图层数据
      type:Array,
      required:true,
      default: []
    },
    slopeLegendData: {//地形地貌（坡度）图层图例
      type:Array,
      required:true,
      default: []
    },
    rkgwLayerBool: {//人口建筑物经济公里格网图层显示
      type:Boolean,
      required:true,
      default: false
    },
    rkgwAllData: {//人口建筑物经济公里格网图层数据
      type:Array,
      required:true,
      default: []
    },
    jtDlLayerBool: {//交通（道路）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    jtDlAllData: {//交通（道路）图层数据
      type:Array,
      required:true,
      default: []
    },
    jtJcLayerBool: {//交通（机场）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    jtJcAllData: {//交通（机场）图层数据
      type:Array,
      required:true,
      default: []
    },
    skLayerBool: {//水库图层显示
      type:Boolean,
      required:true,
      default: false
    },
    skAllData: {//水库图层数据
      type:Array,
      required:true,
      default: []
    },
    schoolLayerBool: {//学校图层显示
      type:Boolean,
      required:true,
      default: false
    },
    schoolAllData: {//学校图层数据
      type:Array,
      required:true,
      default: []
    },
    dzzhLayerBool: {//地质灾害图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dzzhAllData: {//地质灾害图层数据
      type:Array,
      required:true,
      default: []
    },
    dcLayerBool: {//断层图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dcAllData: {//断层图层数据
      type:Array,
      required:true,
      default: []
    },
    csWhqyLayerBool: {//次生灾害危险源（危化企业）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    csWhqyAllData: {//次生灾害危险源（危化企业）图层数据
      type:Array,
      required:true,
      default: []
    },
    csJyzLayerBool: {//次生灾害危险源（加油站）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    csJyzAllData: {//次生灾害危险源（加油站）图层数据
      type:Array,
      required:true,
      default: []
    },
    yjbncsLayerBool: {//应急避难场所图层显示
      type:Boolean,
      required:true,
      default: false
    },
    yjbncsAllData: {//应急避难场所图层数据
      type:Array,
      required:true,
      default: []
    },
    hospitalLayerBool: {//医院图层显示
      type:Boolean,
      required:true,
      default: false
    },
    hospitalAllData: {//医院图层数据
      type:Array,
      required:true,
      default: []
    },
    fwkznlLayerBool: {//房屋抗震能力分区图图层显示
      type:Boolean,
      required:true,
      default: false
    },
    fwkznlAllData: {//房屋抗震能力分区图图层数据
      type:Array,
      required:true,
      default: []
    },
    fwkznlLegendData: {//房屋抗震能力分区图图层图例
      type:Array,
      required:true,
      default: []
    },
    queryMapBool: {//是否开启地图圈选查询
      type:Boolean,
      required:true,
      default: false
    },
  },
  emits:["showHideUploadDiv","showHideManageDiv","showHideQueryDiv","showDetailId","showQueryMapDraw","getMap","mapClick"],
  data() {
    return {
      str: "spaceDataMap",
      map: null,
      projection4490:null,
      center: [105, 34],
      zoom: 4,
      mapLoadingBool:false,//是否正在查询参数
      zoomDefaultPositionBool:true,//显示主界面
      switchMapBool:false,//切换地图
      layer1:null,//天地图街道图
      layer2:null,
      layer3:null,//天地图卫星图
      layer4:null,
      draw:null,//矢量绘制
      snap:null,
      select:null,
      modify:null,
      drag:null,
      source:null,//矢量绘制图层数据
      measureSource:null,//测量结果图层数据
      measure:null,//测量工具
      sketch:null,
      helpTooltipElement:null,
      helpTooltip:null,
      measureTooltipElement:null,
      measureTooltip:null,
      measureTooltipArray:[],//全部测量结果Overlay数组
      showHideMeasureTool:true,//显示|隐藏测量工具
      measureDistanceBool:true,
      measureAreaBool:true,
      stopMeasureBool:true,
      clearMeasureBool:true,
      showHidePositionTool:true,//显示|隐藏定位工具
      addPositionBool:true,
      clearPositionBool:true,
      popupInfoLayer:null,//弹出窗口
      showHideToolsBox:true,
      //addressMatchService:null,//地址匹配
      addressUrl:"https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
      selectFeature:null,//选中要素
      siteVectorLayer:null,//全部重点场所查询结果图层
      showHideUploadDivBool:true,//显示|隐藏上传面板
      showHideManageDivBool:true,//显示|隐藏管理面板
      showHideQueryDivBool:true,//显示|隐藏查询面板
      //图层
      xzqhLayer:null,//行政区划图层
      dxdmGcLayer:null,//地形地貌（高程）图层
      dxdmPdLayer:null,//地形地貌（坡度）图层
      rkgwLayer:null,//人口建筑物经济公里格网图层
      jtDlLayer:null,//交通（道路）图层
      jtJcLayer:null,//交通（机场）图层
      skLayer:null,//水库图层
      schoolLayer:null,//学校图层
      dzzhLayer:null,//地质灾害图层
      dcLayer:null,//断层图层
      csWhqyLayer:null,//次生灾害危险源（危化企业）图层
      csJyzLayer:null,//次生灾害危险源（加油站）图层
      yjbncsLayer:null,//应急避难场所图层
      hospitalLayer:null,//医院图层
      fwkznlLayer:null,//房屋抗震能力分区图图层
      showTextLayerBool:false,//是否显示文字图层
      queryMapDrawBool:false,//是否开启地图圈选
    }
  },
  watch: {
    showHideDivType: {
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          if(newVal===""){//都不显示
            this.showHideUploadDivBool = true;//隐藏上传面板
            this.showHideManageDivBool = true;//隐藏管理面板
            this.showHideQueryDivBool = true;//隐藏查询面板
          }else if(newVal=="showUploadDiv"){
            this.showHideUploadDivBool = false;//显示上传面板
            this.showHideManageDivBool = true;//隐藏管理面板
            this.showHideQueryDivBool = true;//隐藏查询面板
          }else if(newVal=="showManageDiv"){
            this.showHideUploadDivBool = true;//隐藏上传面板
            this.showHideManageDivBool = false;//显示管理面板
            this.showHideQueryDivBool = true;//隐藏查询面板
          }else if(newVal=="showQueryDiv"){
            this.showHideUploadDivBool = true;//隐藏上传面板
            this.showHideManageDivBool = true;//隐藏管理面板
            this.showHideQueryDivBool = false;//显示查询面板
          }
        //}
      },
      immediate:true
    },
    showHideTextLayerBool: {//是否显示文字图层
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("是否显示文字图层");
          console.log(newVal);
          this.showTextLayerBool = newVal;//是否显示文字图层
          //重新显示图层
          //行政区划图层数据显示
          this.showXzqhLayerData();
          //地形地貌（高程）图层显示
          this.showDxdmGcLayerData();
          //地形地貌（坡度）图层显示
          this.showDxdmPdLayerData();
          //人口建筑物经济公里格网图层显示
          this.showRkgwLayerData();
          //交通（道路）图层显示
          this.showJtDlLayerData();
          //交通（机场）图层显示
          this.showJtJcLayerData();
          //水库图层显示
          this.showSkLayerData();
          //学校图层显示
          this.showSchoolLayerData();
          //地质灾害图层显示
          this.showDzzhLayerData();
          //断层图层显示
          this.showDcLayerData();
          //次生灾害危险源（危化企业）图层显示
          this.showCsWhqyLayerData();
          //次生灾害危险源（加油站）图层显示
          this.showCsJyzLayerData();
          //应急避难场所图层显示
          this.showYjbncsLayerData();
          //医院图层显示
          this.showHospitalLayerData();
          //房屋抗震能力分区图图层数据显示
          this.showFwkznlLayerData();
        //}
      },
      immediate:true
    },
    rkgwLegendSelectData: {//人口建筑物经济公里格网图例选择数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("人口建筑物经济公里格网图例选择数据");
          console.log(newVal);
          //人口建筑物经济公里格网图层显示
          this.showRkgwLayerData();
        //}
      },
      immediate:true
    },
    xzqhLayerBool: {//行政区划图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("行政区划图层显示");
        //}
      },
      immediate:true
    },
    xzqhAllData: {//行政区划图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("行政区划图层数据");
          //行政区划图层数据显示
          this.showXzqhLayerData();
        //}
      },
      immediate:true
    },
    dxdmGcLayerBool: {//地形地貌（高程）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（高程）图层显示");
        //}
      },
      immediate:true
    },
    dxdmGcAllData: {//地形地貌（高程）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（高程）图层数据");
          //地形地貌（高程）图层显示
          this.showDxdmGcLayerData();
        //}
      },
      immediate:true
    },
    elevationLegendData: {//地形地貌（高程）图层图例
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（高程）图层图例");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    dxdmPdLayerBool: {//地形地貌（坡度）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（坡度）图层显示");
        //}
      },
      immediate:true
    },
    dxdmPdAllData: {//地形地貌（坡度）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（坡度）图层数据");
          //地形地貌（坡度）图层显示
          this.showDxdmPdLayerData();
        //}
      },
      immediate:true
    },
    slopeLegendData: {//地形地貌（坡度）图层图例
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（坡度）图层图例");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    rkgwLayerBool: {//人口建筑物经济公里格网图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("人口建筑物经济公里格网图层显示");
        //}
      },
      immediate:true
    },
    rkgwAllData: {//人口建筑物经济公里格网图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("人口建筑物经济公里格网图层数据");
          //人口建筑物经济公里格网图层显示
          this.showRkgwLayerData();
        //}
      },
      immediate:true
    },
    jtDlLayerBool: {//交通（道路）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（道路）图层显示");
        //}
      },
      immediate:true
    },
    jtDlAllData: {//交通（道路）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（道路）图层数据");
          //交通（道路）图层显示
          this.showJtDlLayerData();
        //}
      },
      immediate:true
    },
    jtJcLayerBool: {//交通（机场）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（机场）图层显示");
        //}
      },
      immediate:true
    },
    jtJcAllData: {//交通（机场）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（机场）图层数据");
          //交通（机场）图层显示
          this.showJtJcLayerData();
        //}
      },
      immediate:true
    },
    skLayerBool: {//水库图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("水库图层显示");
        //}
      },
      immediate:true
    },
    skAllData: {//水库图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("水库图层数据");
          //水库图层显示
          this.showSkLayerData();
        //}
      },
      immediate:true
    },
    schoolLayerBool: {//学校图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("学校图层显示");
        //}
      },
      immediate:true
    },
    schoolAllData: {//学校图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("学校图层数据");
          //学校图层显示
          this.showSchoolLayerData();
        //}
      },
      immediate:true
    },
    dzzhLayerBool: {//地质灾害图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地质灾害图层显示");
        //}
      },
      immediate:true
    },
    dzzhAllData: {//地质灾害图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地质灾害图层数据");
          //地质灾害图层显示
          this.showDzzhLayerData();
        //}
      },
      immediate:true
    },
    dcLayerBool: {//断层图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("断层图层显示");
        //}
      },
      immediate:true
    },
    dcAllData: {//断层图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("断层图层数据");
          //断层图层显示
          this.showDcLayerData();
        //}
      },
      immediate:true
    },
    csWhqyLayerBool: {//次生灾害危险源（危化企业）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（危化企业）图层显示");
        //}
      },
      immediate:true
    },
    csWhqyAllData: {//次生灾害危险源（危化企业）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（危化企业）图层数据");
          //次生灾害危险源（危化企业）图层显示
          this.showCsWhqyLayerData();
        //}
      },
      immediate:true
    },
    csJyzLayerBool: {//次生灾害危险源（加油站）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（加油站）图层显示");
        //}
      },
      immediate:true
    },
    csJyzAllData: {//次生灾害危险源（加油站）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（加油站）图层数据");
          //次生灾害危险源（加油站）图层显示
          this.showCsJyzLayerData();
        //}
      },
      immediate:true
    },
    yjbncsLayerBool: {//应急避难场所图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("应急避难场所图层显示");
        //}
      },
      immediate:true
    },
    yjbncsAllData: {//应急避难场所图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("应急避难场所图层数据");
          //应急避难场所图层显示
          this.showYjbncsLayerData();
        //}
      },
      immediate:true
    },
    hospitalLayerBool: {//医院图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("医院图层显示");
        //}
      },
      immediate:true
    },
    hospitalAllData: {//医院图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("医院图层数据");
          //医院图层显示
          this.showHospitalLayerData();
        //}
      },
      immediate:true
    },
    fwkznlLayerBool: {//房屋抗震能力分区图图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("房屋抗震能力分区图图层显示");
        //}
      },
      immediate:true
    },
    fwkznlAllData: {//房屋抗震能力分区图图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("房屋抗震能力分区图图层数据");
          //房屋抗震能力分区图图层数据显示
          this.showFwkznlLayerData();
        //}
      },
      immediate:true
    },
    fwkznlLegendData: {//房屋抗震能力分区图图层图例
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("房屋抗震能力分区图图层图例");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    queryMapBool: {//是否开启地图圈选查询
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("是否开启地图圈选查询"+newVal);
          this.queryMapDrawBool = newVal;
          this.queryMapEvent();
        //}
      },
      immediate:true
    },
  },
  created() {

  },
  mounted() {
    console.log("mounted");
    let that = this;
    //地图异步加载
    this.$nextTick(function(){
      console.log('地图异步加载');
      //地图异步加载
      setTimeout(() => {
        //初始化地图信息
        that.initMap();
      }, 200);
    });
  },
  beforeCreate() {//生命周期创建之前
    console.log("beforeCreate");
  },
  beforeMount() {//生命周期挂载之前
    console.log("beforeMount");
  },
  beforeUpdate() {//生命周期更新之前
    console.log("beforeUpdate");
  },
  updated() {//生命周期更新之后
    console.log("updated");
  },
  beforeDestroy() {//生命周期销毁之前
    console.log("beforeDestroy");
  },
  destroyed() {//生命周期销毁完成
    this.map = null;
    console.log("销毁地图");
  },
  activated() {//如果页面有keep-alive缓存功能激活，这个函数会触发
    console.log("activated-"+this.str);
    //自动获取地图div高度
    this.autodivheight();
    //浏览器窗口发生变化时同时变化DIV高度
    window.onresize=this.autodivheight;
  },
  deactivated() {//如果页面有keep-alive缓存功能停用，这个函数会触发
    console.log("deactivated-"+this.str);
    //取消浏览器窗口发生变化时同时变化DIV高度事件
    window.onresize = null;
  },
  methods: {
    initMap() {
      debugger;
      let that = this;
      let mapStr = this.str;
      let targetMap = document.getElementById(mapStr+"-map");
      if(targetMap.innerHTML!=""){
        console.log("清空targetMap");
      }
      targetMap.innerHTML = "";//清空
      //新建popup弹窗
      let targetDiv = document.getElementById(mapStr+"-mapDiv");
      let node = document.createElement("div");
      node.id = mapStr+"-popup";
      node.setAttribute("class","new-ol-popup");
      node.innerHTML = '<a href="#" id="'+mapStr+'-popup-closer" class="new-ol-popup-closer"></a>' +
          '<div id="'+mapStr+'-popup-content"></div>';
      targetDiv.appendChild(node);
      console.log("新建popup");
      //自动获取地图div高度
      this.autodivheight();
      //浏览器窗口发生变化时同时变化DIV高度
      window.onresize=this.autodivheight;
      if(this.map){//避免重复加载地图
        console.log("避免重复加载地图");
        return;
      }
      console.log("初始化地图");
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        view: new View({
          center: this.center,
          maxZoom: 18,
          minZoom: 4,
          zoom: this.zoom,
          constrainResolution:true,//缩放地图可移动到最近的缩放级别（整数zoom级别）
          projection: 'EPSG:4490',
          // resolutions:getResolutions()
        })
      });
      //添加天地图图层
      this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
      this.map.addLayer(this.layer1);
      this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
      this.map.addLayer(this.layer2);
      this.layer1.setZIndex(0);
      this.layer2.setZIndex(0);
      //矢量绘制图层
      this.source = new VectorSource({
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: that.source,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(vectorLayer);
      vectorLayer.setZIndex(1);
      //测量结果图层
      this.measureSource = new VectorSource({
        wrapX: false
      });
      let measureLayer = new VectorLayer({
        source: that.measureSource,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(measureLayer);
      measureLayer.setZIndex(1);
      //全部重点场所查询结果图层--聚合
      this.clusterMarkers();

      //行政区划图层
      this.xzqhLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.xzqhLayer);
      this.xzqhLayer.setZIndex(1);

      //地形地貌（高程）图层
      this.dxdmGcLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.dxdmGcLayer);
      this.dxdmGcLayer.setZIndex(2);

      //地形地貌（坡度）图层
      this.dxdmPdLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.dxdmPdLayer);
      this.dxdmPdLayer.setZIndex(2);


      //人口建筑物经济公里格网图层
      this.rkgwLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.rkgwLayer);
      this.rkgwLayer.setZIndex(2);

      //交通（道路）图层
      this.jtDlLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.jtDlLayer);
      this.jtDlLayer.setZIndex(4);

      //交通（机场）图层
      this.jtJcLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.jtJcLayer);
      this.jtJcLayer.setZIndex(5);

      //水库图层
      this.skLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.skLayer);
      this.skLayer.setZIndex(5);

      //学校图层
      this.schoolLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.schoolLayer);
      this.schoolLayer.setZIndex(5);

      //地质灾害图层
      this.dzzhLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.dzzhLayer);
      this.dzzhLayer.setZIndex(5);

      //断层图层
      this.dcLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.dcLayer);
      this.dcLayer.setZIndex(4);

      //次生灾害危险源（危化企业）图层
      this.csWhqyLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.csWhqyLayer);
      this.csWhqyLayer.setZIndex(5);

      //次生灾害危险源（加油站）图层
      this.csJyzLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.csJyzLayer);
      this.csJyzLayer.setZIndex(5);

      //应急避难场所图层
      this.yjbncsLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.yjbncsLayer);
      this.yjbncsLayer.setZIndex(5);

      //医院图层
      this.hospitalLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.hospitalLayer);
      this.hospitalLayer.setZIndex(5);

      //房屋抗震能力分区图图层图层
      this.fwkznlLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.fwkznlLayer);
      this.fwkznlLayer.setZIndex(3);

      //添加控件
      let info = new Control({element: document.getElementById(mapStr+'-mapDiv')});
      info.setMap(this.map);
      this.map.addControl(info);
      //弹出窗口
      let popupTarget = document.getElementById(this.str+"-popup");
      if(popupTarget){
        this.popupInfoLayer = new Overlay({
          element: popupTarget,
          positioning: 'center-center'
        });
        this.map.addOverlay(this.popupInfoLayer);
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
        //关闭弹出事件
        document.getElementById(this.str+"-popup-closer").onclick = function () {
          that.popupInfoLayer.setPosition(undefined);
          //隐藏弹出窗口
          document.getElementById(that.str+"-popup").style.display="none";
        };
      }
      //右键菜单事件
      this.map.on('contextmenu', function(event){
        event.preventDefault();//屏蔽自带的右键事件
        let pixel = that.map.getEventPixel(event.originalEvent);
        let feature = that.map.forEachFeatureAtPixel(pixel,function(feature){
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if(feature && that.draw==null){

        }
      });
      //点击地图事件
      this.map.on('click', function(event){
        that.$emit('mapClick', event);
        //隐藏右键菜单
        that.hideContextMenu();
        //隐藏弹出窗口
        if(that.popupInfoLayer!=null){
          that.popupInfoLayer.setPosition(undefined);
        }
        let pixel = that.map.getEventPixel(event.originalEvent);
        let coordinate = that.map.getEventCoordinate(event.originalEvent);
        //判断定位工具是否开启状态
        if(that.showHidePositionTool==false){
          document.getElementById(mapStr+"-MousePositionLon").value = coordinate[0];
          document.getElementById(mapStr+"-MousePositionLat").value = coordinate[1];
        }
        let feature = that.map.forEachFeatureAtPixel(pixel,function(feature){
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if(feature && that.draw==null){
          //选中要素
          that.selectFeature = feature;
          let temp = feature.getProperties();
          console.log(temp);
          if(temp.id!=undefined && temp.id!=null && temp.dataType!=undefined && temp.dataType!=null) {//数据类型
            let id = temp.id;
            //数据类型
            let dataType = temp.dataType;
            console.log(dataType + "查看详情：" + id);
            if(dataType=="地形地貌（高程）" || dataType=="地形地貌（坡度）"){
              //设置弹窗内容
              that.setPopupContent(temp);
              that.popupInfoLayer.setPosition(coordinate);
            }else{
              //根据ID显示查询详情修改面板
              that.showDetailId(id, dataType);
            }
          }
        }
      });
      //地图移动事件
      this.map.on('moveend', function (event) {
        let center = that.map.getView().getCenter();
        let zoom = that.map.getView().getZoom();
        if(center[0]!=that.center[0] || center[1]!=that.center[1] || zoom!=that.zoom){
          //设置主界面图标文字
          that.zoomDefaultPositionBool = false;
        }else{//主界面
          //设置主界面图标文字
          that.zoomDefaultPositionBool = true;
        }
      });
      //鼠标移动事件--测量工具
      this.map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        if(that.measure!=null){
          let helpMsg = '点击开始绘制';

          if (that.sketch) {
            const geom = that.sketch.getGeometry();
            if (geom instanceof Polygon) {
              helpMsg = '点击继续绘制多边形';
            } else if (geom instanceof LineString) {
              helpMsg = '点击继续绘制折线';
            }
          }

          that.helpTooltipElement.innerHTML = helpMsg;
          that.helpTooltip.setPosition(evt.coordinate);

          that.helpTooltipElement.classList.remove('hidden');
        }
      });
      //鼠标移出事件--测量工具
      this.map.getViewport().addEventListener('mouseout', function () {
        if(that.measure!=null){
          that.helpTooltipElement.classList.add('hidden');
        }
      });
      //地址匹配
      //this.addressMatchService = new AddressMatchService(this.addressUrl);
      //地图缩放到权限位置
      this.zoomDefaultPosition();

      //地图对象传递
      this.$emit("getMap",this.map);
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:658px
      let tempHeight = 864;
      let mapTempHeight = 658;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if(mapHeight < 525){
        mapHeight = 525;
      }
      //设置地图高度
      document.getElementById(this.str+"-map").style.height= mapHeight +"px";
      console.log("窗口高度："+winHeight+"地图高度："+mapHeight);
      //resize事件--刷新地图,确保地图不变形
      if(this.map){
        this.map.updateSize();
        console.log("resize事件--刷新地图,确保地图不变形");
      }
    },
    setPopupContent(temp){//设置弹窗内容
      let html = "";
      if(temp.dataType=="地形地貌（高程）"){
        html += "高程："+temp.elevationNumber;
      }else if(temp.dataType=="地形地貌（坡度）"){
        html += "坡度："+temp.slopeNumber;
      }
      document.getElementById(this.str+'-popup-content').innerHTML = html;
      //显示弹出窗口
      document.getElementById(this.str+"-popup").style.display="block";
    },
    getTextFormat(str){//格式化文本内容
      if(str==null || str==undefined){
        str = "";
      }
      return str;
    },
    hideContextMenu(){//隐藏右键菜单
      //隐藏右键菜单

    },
    //切换地图
    switchMap(){
      if(this.switchMapBool){//显示街道图
        this.switchMapBool = false;
        //添加天地图图层
        if(this.layer1==null){
          this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
          this.map.addLayer(this.layer1);
        }
        if(this.layer2==null){
          this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
          this.map.addLayer(this.layer2);
        }
        //显示街道图
        this.layer1.setVisible(true);
        this.layer2.setVisible(true);
        this.layer3.setVisible(false);
        this.layer4.setVisible(false);
        this.layer1.setZIndex(0);
        this.layer2.setZIndex(0);
      }else{//显示卫星图
        this.switchMapBool = true;
        if(this.layer3==null){
          this.layer3 = getTiandituImgMap();//fxpc天地图卫星影像底图
          this.map.addLayer(this.layer3);
        }
        if(this.layer4==null){
          this.layer4 = getTiandituImgText();//fxpc天地图卫星影像注记
          this.map.addLayer(this.layer4);
        }
        //显示卫星图
        this.layer1.setVisible(false);
        this.layer2.setVisible(false);
        this.layer3.setVisible(true);
        this.layer4.setVisible(true);
        this.layer3.setZIndex(0);
        this.layer4.setZIndex(0);
      }
    },
    //地图缩放到权限位置
    zoomDefaultPosition() {
      //刷新地图,确保地图不变形
      this.map.updateSize();
      this.map.getView().setCenter(this.center);
      this.map.getView().setZoom(this.zoom);
      this.zoomDefaultPositionBool = true;
    },
    //显示工具箱
    showHideToolsBoxDiv(){
      if(this.showHideToolsBox){
        this.showHideToolsBox = false;
        document.getElementById(this.str+"-ToolsBoxDiv").style.display="block";
      }else{
        this.showHideToolsBox = true;
        document.getElementById(this.str+"-ToolsBoxDiv").style.display="none";
      }
      //关闭全部工具
      this.closeAllToolsBox(null);
    },
    //关闭全部工具
    closeAllToolsBox(type){
      //关闭测量工具
      if(type!="MeasureTool" && this.showHideMeasureTool==false){
        this.showHideMeasureTool = true;
        let divId = this.str+"-MeasureToolsDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空测量结果
        this.clearMeasure();
        this.clearMeasureBool = true;
      }
      //关闭定位工具
      if(type!="PositionTool" && this.showHidePositionTool==false){
        this.showHidePositionTool = true;
        let divId = this.str+"-MousePositionDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空定位结果
        this.clearPosition();
      }
    },
    //地图工具--测试地图打印功能
    toolsBoxPrintTest(){
      let that = this;
      //测试地图导出方法一
      /*this.map.once('rendercomplete', function () {
        const mapCanvas = document.createElement('canvas');
        const size = that.map.getSize();
        mapCanvas.width = size[0];
        mapCanvas.height = size[1];
        const mapContext = mapCanvas.getContext('2d');
        Array.prototype.forEach.call(
            //document.querySelectorAll('.ol-layer canvas'),
            document.querySelectorAll('#spaceDataMap-map .ol-viewport .ol-layer canvas'),
            function (canvas) {
              if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                // Get the transform parameters from the style's transform matrix
                const matrix = transform
                    .match(/^matrix\(([^\(]*)\)$/)[1]
                    .split(',')
                    .map(Number);
                // Apply the transform to the export map context
                CanvasRenderingContext2D.prototype.setTransform.apply(
                    mapContext,
                    matrix
                );
                mapContext.drawImage(canvas, 0, 0);
              }
            }
        );
        if (navigator.msSaveBlob) {
          // link download attribute does not work on MS browsers
          navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
        } else {
          const link = document.getElementById('image-download');
          link.crossOrigin = 'anonymous';
          link.href = mapCanvas.toDataURL();
          link.click();
        }
      });
      this.map.renderSync();*/


      //测试地图导出方法二
      /*let exportPNGElement = document.getElementById('export-png'); //导出图片功能项
      let manypng = document.getElementById('manypng'); //导出图片功能项
      if ('download' in exportPNGElement) {
        exportPNGElement.addEventListener('click', function (e) {
          that.map.once('postcompose', function (event) {debugger
            let canvas = event.context.canvas; //地图渲染容器
            exportPNGElement.href = canvas.toDataURL('image/png'); //导出图片
          });
          that.map.renderSync();
        }, false);
      } else {
        alert("浏览器不支持此导出地图图片功能！");
      }

      if ('download' in manypng) {
        manypng.addEventListener('click', function(e) {
          //  that.map.removeInteraction(draw);
          addInteraction();
          that.map.renderSync();
        },false);
      }

      let draw; // global so we can remove it later
      let source = new VectorSource();
      function addInteraction() {
        draw = new Draw({
          source: source,
          type: 'LineString',
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 2
            }),
            image: new Circle({
              radius: 7,
              fill: new Fill({
                color: '#ffcc33'
              })
            })
          }),
          maxPoints: 2,
          geometryFunction: createBox()//矩形框
        })

        that.map.addInteraction(draw);

        // that.map.values_.target='map2';

        function getXDis(e, number) {
          let min = undefined;
          let max = undefined;
          e.forEach(element => {
            if (min == undefined || element[number] < min) {
              min = element[number];
            }

            if (max == undefined || element[number] > max) {
              max = element[number];
            }
          });
          return [min+2, max - min-4];
        }

        let extent = [];
        draw.on('drawend',function(evt){
          let feature = evt.feature;console.log(feature);
          let ftarget = evt.target.a;
          let geometry=feature.getGeometry();
          let ext=geometry.getExtent();
          that.map.removeInteraction(draw);

          let r = that.map.getView().getResolutionForExtent(ext, that.map.getSize());//根据范围获取分辨率
          that.map.getView().setResolution(r);
          that.map.getView().setZoom(12);
          let centerone=olExtent.getCenter(ext);
          that.map.getView().setCenter(centerone);

          let canvas;
          let imageData;
          let canvas2;
          let coordinate=geometry.getCoordinates();
          that.map.once("postrender", function (e) {
            extent[0] = e.target.getPixelFromCoordinate(coordinate[0][0]);//转画布坐标
            extent[1] = e.target.getPixelFromCoordinate(coordinate[0][1]);
            extent[2] = e.target.getPixelFromCoordinate(coordinate[0][2]);
            extent[3] = e.target.getPixelFromCoordinate(coordinate[0][3]);

            let x_dx = getXDis(extent, 0);
            let y_dy = getXDis(extent, 1);

            that.map.once("postcompose", function(event) {
              canvas = event.context.canvas;
              let ctx2=canvas.getContext("2d");
              imageData = ctx2.getImageData(x_dx[0], y_dy[0], x_dx[1], y_dy[1]);
              let c=document.getElementById("spaceDataMap-map");
              c.style.width=imageData.width+'px';
              c.style.height=imageData.height+'px';
              that.map.updateSize();//容器改变重新加载地图
            });
            that.map.once('rendercomplete',function(){//渲染完成
              canvas.toBlob(function (blob) {
                saveAs(blob, 'map.png');debugger
                $('#spaceDataMap-map').css({
                  width:"100%",
                  height:"100%"
                });
                that.map.updateSize();//容器改变重新加载地图
              });
            });
          });
        });
      }*/
    },
    measureToolBox(){//测量工具Div
      let divId = this.str+"-MeasureToolsDiv";
      //关闭全部工具
      this.closeAllToolsBox("MeasureTool");
      if(this.showHideMeasureTool){
        this.showHideMeasureTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      }else{
        this.showHideMeasureTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    measureDistance(){//测距
      if(this.source!=null){
        //地图工具箱--开启测距
        this.setMapToolBox('MeasureDistance');
        //设置样式
        this.measureDistanceBool = false;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    measureArea(){//测面
      if(this.source!=null){
        //地图工具箱--开启测面
        this.setMapToolBox('MeasureArea');
        //设置样式
        this.measureAreaBool = false;
        this.measureDistanceBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    stopMeasure(){//停止测量
      if(this.source!=null){
        //地图工具箱--停止测量
        this.setMapToolBox('StopMeasure');
        //设置样式
        this.stopMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.clearMeasureBool = true;
      }
    },
    clearMeasure(){//清空测量结果
      if(this.source!=null){
        //地图工具箱--清空测量结果
        this.setMapToolBox('ClearMeasure');
        //设置样式
        this.clearMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
      }
    },
    positionToolBox(){//定位工具Div
      let divId = this.str+"-MousePositionDiv";
      //关闭全部工具
      this.closeAllToolsBox("PositionTool");
      if(this.showHidePositionTool){
        this.showHidePositionTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      }else{
        this.showHidePositionTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    addPosition(){//添加定位结果
      this.clearPositionBool = true;
      this.addPositionBool = false;
      //添加定位结果
      if(this.source!=null){
        let longitude = document.getElementById(this.str+"-MousePositionLon").value;
        let latitude = document.getElementById(this.str+"-MousePositionLat").value;
        //处理经纬度
        let lonlat = this.getLonLat(longitude,latitude);
        if(lonlat!=null){
          //点
          let featureTmp = new Feature({
            geometry: new Point(lonlat)
          });
          //样式
          let style = this.getPointStyle();
          featureTmp.setStyle(style);
          //设置属性
          featureTmp.setProperties({
            type:"position",
            longitude:longitude,
            latitude:latitude,
          });
          //添加定位点
          this.source.addFeature(featureTmp);
          //居中缩放
          this.map.getView().setCenter(lonlat);
          this.map.getView().setZoom(12);
        }
      }
    },
    clearPosition(){//清空定位结果
      this.clearPositionBool = false;
      this.addPositionBool = true;
      //地图工具箱--清空
      this.setMapToolBox("Clear");
    },
    //地图工具箱
    setMapToolBox(value){
      let that = this;
      if (value === 'Clear') {//清空
        //清空
        that.source.clear();
        //停止绘制|修改|拖拽|选择
        clearInteraction();
      }else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
        //点|线|面|圆绘制
        //开启绘制
        startDrawInteraction(value,false);
      }else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
        //手绘线|手绘面
        value = value.split("FreeHand")[1];
        //开启绘制
        startDrawInteraction(value,true);
      }else if (value === 'StopDraw') {//停止绘制
        //停止绘制
        stopDrawInteraction();
      }else if (value === 'Snap') {//开启捕捉
        //开启捕捉
        startSnapInteraction();
      }else if (value === 'NotSnap') {//停止捕捉
        //停止捕捉
        stopSnapInteraction();
      }else if (value === 'Modify') {//开启修改
        //开启修改
        startModifyInteraction();
      }else if (value === 'NotModify') {//停止修改
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
      }else if (value === 'Drag') {//开启拖拽
        //开启拖拽
        startDragInteraction();
      }else if (value === 'NotDrag') {//停止拖拽
        //停止拖拽
        stopDragInteraction();
      }else if (value === 'Select') {//开启选择
        //开启选择
        startSelectInteraction();
      }else if (value === 'NotSelect') {//停止选择
        //停止选择
        stopSelectInteraction();
      } else if (value === 'MeasureDistance') {//开启测距
        //开启测距
        startMeasureInteraction('LineString');
      } else if (value === 'MeasureArea') {//开启测面
        //开启测面
        startMeasureInteraction('Polygon');
      } else if (value === 'StopMeasure') {//停止测量（测距|测面）
        //停止测量
        stopMeasureInteraction();
      } else if (value === 'ClearMeasure') {//清空测量结果
        //停止测量
        stopMeasureInteraction();
        //清空测量结果
        clearMeasureResult();
      }

      //停止绘制|修改|拖拽|选择
      function clearInteraction() {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
      }

      //停止捕捉
      function stopSnapInteraction(){
        if (that.snap) {
          that.map.removeInteraction(that.snap);
          that.snap = null;
        }
      }

      //开启捕捉
      function startSnapInteraction(){
        //停止捕捉
        stopSnapInteraction();
        //开启捕捉
        that.snap = new Snap({
          source: that.source
        });
        that.map.addInteraction(that.snap);
      }

      //停止拖拽
      function stopDragInteraction() {
        //停止拖拽
        if (that.drag) {
          that.map.removeInteraction(that.drag);
          that.drag = null;
        }
      }

      //开启拖拽
      function startDragInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止修改
        stopModifyInteraction();
        //开启选择
        startSelectInteraction();
        //停止拖拽
        stopDragInteraction();
        //开启拖拽
        that.drag = new Translate({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.drag);
      }

      //停止修改
      function stopModifyInteraction() {
        //停止修改
        if (that.modify) {
          that.map.removeInteraction(that.modify);
          that.modify = null;
        }
      }

      //开启修改
      function startModifyInteraction() {
        //停止绘制
        stopDrawInteraction();
        //开启选择
        startSelectInteraction();
        //停止修改
        stopModifyInteraction();
        //开启修改
        that.modify = new Modify({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.modify);
      }

      //停止选择
      function stopSelectInteraction() {
        //停止选择
        if (that.select) {
          that.map.removeInteraction(that.select);
          that.select = null;
        }
      }

      //开启选择
      function startSelectInteraction() {
        //停止选择
        stopSelectInteraction();
        //开启选择
        that.select = new Select({
          wrapX: false
        });
        that.map.addInteraction(that.select);
      }

      //停止绘制
      function stopDrawInteraction() {
        //停止绘制
        if (that.draw) {
          that.map.removeInteraction(that.draw);
          that.draw = null;
        }
      }

      //开启绘制
      function startDrawInteraction(type,bool) {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
        if(bool){//手绘线|手绘面
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20,
            freehand: true
          });
          that.map.addInteraction(that.draw);
        }else{//点|线|面|圆绘制
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20
          });
          that.map.addInteraction(that.draw);
        }
        //完成绘制事件
        that.draw.on('drawend', function (evt) {
          //是否开启地图圈选查询
          if(that.queryMapDrawBool==true){
            that.queryMapDrawBool = false;
            //停止绘制
            stopDrawInteraction();
            //获取空间数据
            let geom = evt.feature.getGeometry();
            if (geom instanceof Polygon) {
              let coords = geom.getCoordinates()[0];
              if(coords.length>0){
                let polygonWkt = "POLYGON((";
                for(let i=0;i<coords.length;i++){
                  if(i>0){
                    polygonWkt += ",";
                  }
                  let lonlat = coords[i];
                  polygonWkt += lonlat[0]+" "+lonlat[1];
                }
                polygonWkt += "))";
                //地图圈选查询
                that.$emit("showQueryMapDraw",polygonWkt);
              }
            }
          }
        });
      }

      //计算面积
      function getPolygonArea (polygon) {
        // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
        const area = getArea(polygon, {projection: 'EPSG:4490'})
        let output = Math.round((area / 1000000) * 100) / 100;//平方公里
        return output;
      }

      ////////////////////////////////////////////////////////////////////测量工具箱
      //格式化距离
      function formatLength(line) {
        const length = getLength(line, {projection: 'EPSG:4490'});
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }
        return output;
      }

      //格式化面积
      function formatArea(polygon) {
        const area = getArea(polygon, {projection: 'EPSG:4490'});
        let output;
        if (area > 10000) {
          output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
        }
        return output;
      }

      //创建新的提示tip
      function createHelpTooltip() {
        if (that.helpTooltipElement!=null) {
          that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
        }
        that.helpTooltipElement = document.createElement('div');
        that.helpTooltipElement.className = 'ol-tooltip hidden';
        that.helpTooltip = new Overlay({
          element: that.helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        that.map.addOverlay(that.helpTooltip);
      }

      //创建新的测量提示
      function createMeasureTooltip() {
        if (that.measureTooltipElement!=null) {
          that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
        }
        that.measureTooltipElement = document.createElement('div');
        that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        that.measureTooltip = new Overlay({
          element: that.measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        that.map.addOverlay(that.measureTooltip);
      }

      //开启测量工具
      function startMeasureInteraction(type) {
        //停止测量工具
        stopMeasureInteraction();

        console.log(type);
        //开启测量工具--绘制
        that.measure = new Draw({
          source: that.measureSource,
          type: type,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)',
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
            }),
          }),
        });
        that.map.addInteraction(that.measure);

        //创建新的测量提示
        createMeasureTooltip();
        //创建新的提示tip
        createHelpTooltip();

        let listener;
        that.measure.on('drawstart', function (evt) {
          //设置sketch
          that.sketch = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = that.sketch.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            that.measureTooltipElement.innerHTML = output;
            that.measureTooltip.setPosition(tooltipCoord);
          });
        });
        //完成测量绘制
        that.measure.on('drawend', function () {
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          that.measureTooltip.setOffset([0, -7]);
          //添加到数组
          that.measureTooltipArray.push(that.helpTooltip);
          //添加到数组
          that.measureTooltipArray.push(that.measureTooltip);
          //清空sketch
          that.sketch = null;
          //清空tooltip
          that.measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
        });
      }

      //停止测量工具
      function stopMeasureInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止测量工具
        if (that.measure) {
          that.map.removeInteraction(that.measure);
          that.measure = null;
          //隐藏提示tip
          that.helpTooltipElement.classList.add('hidden');
          //移除测量提示
          if(that.helpTooltip!=null){
            that.map.removeOverlay(that.helpTooltip);
          }
          if(that.measureTooltip!=null){
            that.map.removeOverlay(that.measureTooltip);
          }
        }
      }

      //清空测量结果
      function clearMeasureResult(){
        if(that.measureSource!=null){
          //清空测量结果
          that.measureSource.clear();
          //清空测量结果提示数组
          if(that.measureTooltipArray.length>0){
            for(let i=0;i<that.measureTooltipArray.length;i++){
              that.map.removeOverlay(that.measureTooltipArray[i]);
            }
            that.measureTooltipArray = [];
          }
        }
      }
    },
    getPolyonStyle(color,backgroundColor){//多边形样式
      if(backgroundColor==null){
        backgroundColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill:new Fill({//填充样式
          color:backgroundColor
        }),
        stroke:new Stroke({//描绘
          width:1,//宽
          color:color
        })
      });

      return style;
    },
    getPointStyle(){//点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          anchor: [0.5, 1]
        }),
      });

      return style;
    },
    getPointStyleByColor(fillColor,text,radius){//圆点样式
      let style = null;
      if(radius==null){
        radius = 2;
      }
      //显示文字
      if(this.showTextLayerBool){
        style = new Style({
          image: new Circle({
            radius: radius,
            fill: new Fill({
              color: fillColor,
            }),
          }),
          text: new Text({
            text: text,
            fill: new Fill({
              color: 'black'
            }),
            stroke:new Stroke({//线
              width:2,//宽
              color:"white"
            }),
            offsetY:-10
          })
        });
      }else{
        style = new Style({
          image: new Circle({
            radius: radius,
            fill: new Fill({
              color: fillColor,
            }),
            stroke:new Stroke({//线
              width:1,//宽
              color:fillColor
            }),
          })
        });
      }

      return style;
    },
    getLineStringStyle(color,text){//线样式
      let style = null;
      //显示文字
      if(this.showTextLayerBool){
        style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//线
            width:2,//宽
            color:color
          }),
          text: new Text({
            text: text,
            fill: new Fill({
              color: 'black'
            }),
            stroke:new Stroke({//线
              width:2,//宽
              color:"white"
            }),
            offsetY:-5
          })
        });
      }else{
        style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//线
            width:2,//宽
            color:color
          })
        });
      }

      return style;
    },
    //处理经纬度
    getLonLat(longitude,latitude){
      let lonlat = null;
      if(longitude!=null && latitude!=null && longitude!="" && latitude!=""){
        let lon = Number(longitude);
        let lat = Number(latitude);
        if(lon>0 && lon<180 && lat>0 && lat<90){
          lonlat = [lon,lat];
        }
      }

      return lonlat;
    },
    clusterMarkers(){//聚合点图标
      //全部重点场所查询结果图层
      this.siteVectorLayer = new VectorLayer({
        source: new Cluster({
          distance: 40,
          minDistance: 20,
          source: new VectorSource({
            wrapX: false
          })
        }),
        projection: 'EPSG:4490',
        style: function (feature) {
          let styleCache = {};
          let size = feature.get('features').length;
          let style = styleCache[size];
          if (!style) {
            let color = size > 25 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
            let radius = Math.max(8, Math.min(size * 0.75, 20));
            if(size==1){
              style = new Style({
                image: new Icon({
                  src: dingweiImg,
                  anchor: [0.5, 1]
                }),
              });
            }else{
              style = styleCache[size] = [new Style({
                image: new Circle({
                  radius: radius,
                  stroke: new Stroke({
                    color: "rgba(" + color + ",0.5)",
                    width: 15
                  }),
                  fill: new Fill({
                    color: "rgba(" + color + ",1)"
                  })
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: '#fff'
                  })
                })
              })
              ];
            }
          }
          return style;
        }
      });
      this.map.addLayer(this.siteVectorLayer);
      this.siteVectorLayer.setZIndex(2);
    },
    //显示|隐藏上传面板
    showHideUploadDiv(){
      this.$emit("showHideUploadDiv",this.showHideUploadDivBool);
      if(this.showHideUploadDivBool){
        this.showHideUploadDivBool = false;
        this.showHideQueryDivBool = true;//隐藏查询面板
        this.showHideManageDivBool = true;//隐藏管理面板
      }else{
        this.showHideUploadDivBool = true;
      }
    },
    //显示|隐藏管理面板
    showHideManageDiv(){
      this.$emit("showHideManageDiv",this.showHideManageDivBool);
      if(this.showHideManageDivBool){
        this.showHideManageDivBool = false;
        this.showHideUploadDivBool = true;//隐藏上传面板
        this.showHideQueryDivBool = true;//隐藏查询面板
      }else{
        this.showHideManageDivBool = true;
      }
    },
    //显示|隐藏查询面板
    showHideQueryDiv(){
      this.$emit("showHideQueryDiv",this.showHideQueryDivBool);
      if(this.showHideQueryDivBool){
        this.showHideQueryDivBool = false;
        this.showHideUploadDivBool = true;//隐藏上传面板
        this.showHideManageDivBool = true;//隐藏管理面板
      }else{
        this.showHideQueryDivBool = true;
      }
    },
    //根据ID显示查询详情修改面板
    showDetailId(id,dataType){
      let array = [id,dataType];
      this.$emit("showDetailId",array);
    },
    showBoundingExtent(coordinates){//缩放到区域位置
      console.log("缩放到区域位置");
      if (this.map!=null && coordinates!=null && coordinates.length > 1) {
        console.log(coordinates);
        let extent = boundingExtent(coordinates);
        //this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
        this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
        //获取默认位置
        //this.center = this.map.getView().getCenter();
        //this.zoom = this.map.getView().getZoom();
      }
    },
    //行政区划图层数据显示
    showXzqhLayerData(){
      let list = this.xzqhAllData;
      if(list!=null && list.length>0){
        if(this.xzqhLayer!=null){
          //清空图层
          this.xzqhLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].areaId;//主键ID
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //样式
            let style = this.getPolyonStyle("rgb(5 5 233)",null);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"行政区划"});
            //添加行政区划
            this.xzqhLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.xzqhLayer!=null){
          //清空图层
          this.xzqhLayer.getSource().clear();
        }
      }
    },
    //人口建筑物经济公里格网图层显示
    showRkgwLayerData(){
      let list = this.rkgwAllData;
      if(list!=null && list.length>0){
        if(this.rkgwLayer!=null){
          //图例设置样式
          let legendSelectData = this.rkgwLegendSelectData;
          let legendType = "";
          let legendArray = [];
          if(legendSelectData.length==2){
            legendType = legendSelectData[0];
            for(let i=0;i<legendSelectData[1].length;i++){
              let legendName = legendSelectData[1][i].name;
              let legendColor = legendSelectData[1][i].color;
              if(legendName.indexOf("以上")==-1){
                let legendArr = legendName.split("-");
                let minLegend = Number(legendArr[0]);
                let maxLegend = Number(legendArr[1]);
                legendArray.push([minLegend,maxLegend,legendColor]);
              }else{
                let minLegend = Number(legendName.split("以上")[0]);
                let maxLegend = null;
                legendArray.push([minLegend,maxLegend,legendColor]);
              }
            }
          }
          //清空图层
          this.rkgwLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].pbeId;//主键ID
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            let backgroundColor = null;
            //图例样式设置
            if(legendType=="人口"){
              let population = list[i].population;
              //根据值和图例样式数组获取颜色
              backgroundColor = this.getColorByLegendArray(legendArray,population);
            }else if(legendType=="建筑物"){
              let coveredarea = list[i].coveredarea;
              //根据值和图例样式数组获取颜色
              backgroundColor = this.getColorByLegendArray(legendArray,coveredarea);
            }else if(legendType=="经济"){
              let gdp = list[i].gdp;
              //根据值和图例样式数组获取颜色
              backgroundColor = this.getColorByLegendArray(legendArray,gdp);
            }
            //样式
            let style = this.getPolyonStyle("orange",backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"人口建筑物经济公里格网"});
            //添加人口建筑物经济公里格网
            this.rkgwLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.rkgwLayer!=null){
          //清空图层
          this.rkgwLayer.getSource().clear();
        }
      }
    },
    //根据值和图例样式数组获取颜色
    getColorByLegendArray(legendArray,value){
      let color = "orange";
      //console.log("根据值和图例样式数组获取颜色:"+value);
      //console.log(legendArray);
      for(let i=0;i<legendArray.length;i++){
        let min = legendArray[i][0];
        let max = legendArray[i][1];
        if(value>=min){
          if(max!=null){
            if(value<=max){
              color = legendArray[i][2];
              break;
            }
          }else{
            color = legendArray[i][2];
            break;
          }
        }
      }
      //console.log(color);

      return color;
    },
    //交通（道路）图层显示
    showJtDlLayerData(){
      let list = this.jtDlAllData;
      if(list!=null && list.length>0){
        if(this.jtDlLayer!=null){
          //清空图层
          this.jtDlLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].roadName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //样式
            let style = this.getLineStringStyle("black",name);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"交通（道路）",name:name});
            //添加交通（道路）
            this.jtDlLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.jtDlLayer!=null){
          //清空图层
          this.jtDlLayer.getSource().clear();
        }
      }
    },
    //交通（机场）图层显示
    showJtJcLayerData(){
      let list = this.jtJcAllData;
      if(list!=null && list.length>0){
        if(this.jtJcLayer!=null){
          //清空图层
          this.jtJcLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].airportName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //样式
            let style = this.getPointStyleByColor("green",name,null);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"交通（机场）",name:name});
            //添加机场
            this.jtJcLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.jtJcLayer!=null){
          //清空图层
          this.jtJcLayer.getSource().clear();
        }
      }
    },
    //水库图层显示
    showSkLayerData(){
      let list = this.skAllData;
      if(list!=null && list.length>0){
        if(this.skLayer!=null){
          //清空图层
          this.skLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].resName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //样式
            let style = this.getPointStyleByColor("blue",name,null);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"水库",name:name});
            //添加水库
            this.skLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.skLayer!=null){
          //清空图层
          this.skLayer.getSource().clear();
        }
      }
    },
    //学校图层显示
    showSchoolLayerData(){
      let list = this.schoolAllData;
      if(list!=null && list.length>0){
        if(this.schoolLayer!=null){
          //清空图层
          this.schoolLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].schName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //样式
            let style = this.getPointStyleByColor("rgb(0,134,84)",name,null);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"学校",name:name});
            //添加学校
            this.schoolLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.schoolLayer!=null){
          //清空图层
          this.schoolLayer.getSource().clear();
        }
      }
    },
    //地质灾害图层显示
    showDzzhLayerData(){
      let list = this.dzzhAllData;
      if(list!=null && list.length>0){
        if(this.dzzhLayer!=null){
          //清空图层
          this.dzzhLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].dgdName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //样式
            let style = this.getPointStyleByColor("red",name,null);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"地质灾害",name:name});
            //添加地质灾害
            this.dzzhLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dzzhLayer!=null){
          //清空图层
          this.dzzhLayer.getSource().clear();
        }
      }
    },
    //断层图层显示
    showDcLayerData(){
      let list = this.dcAllData;
      if(list!=null && list.length>0){
        if(this.dcLayer!=null){
          //清空图层
          this.dcLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].fauId;//主键ID
            let name = list[i].fauName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //样式
            let style = this.getLineStringStyle("red",name);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"断层",name:name});
            //添加断层
            this.dcLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dcLayer!=null){
          //清空图层
          this.dcLayer.getSource().clear();
        }
      }
    },
    //次生灾害危险源（危化企业）图层显示
    showCsWhqyLayerData(){
      let list = this.csWhqyAllData;
      if(list!=null && list.length>0){
        if(this.csWhqyLayer!=null){
          //清空图层
          this.csWhqyLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].redName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //经纬度
            let longitude = list[i].redLongitude;
            let latitude = list[i].redLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              allCoordinates.push(lonlat);
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("purple",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"次生灾害危险源（危化企业）",name:name});
              //添加次生灾害危险源（危化企业）
              this.csWhqyLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.csWhqyLayer!=null){
          //清空图层
          this.csWhqyLayer.getSource().clear();
        }
      }
    },
    //次生灾害危险源（加油站）图层显示
    showCsJyzLayerData(){
      let list = this.csJyzAllData;
      if(list!=null && list.length>0){
        if(this.csJyzLayer!=null){
          //清空图层
          this.csJyzLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].gsName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //经纬度
            let longitude = list[i].gsLongitude;
            let latitude = list[i].gsLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              allCoordinates.push(lonlat);
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("rgb(244,111,68)",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"次生灾害危险源（加油站）",name:name});
              //添加次生灾害危险源（加油站）
              this.csJyzLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.csJyzLayer!=null){
          //清空图层
          this.csJyzLayer.getSource().clear();
        }
      }
    },
    //应急避难场所图层显示
    showYjbncsLayerData(){
      let list = this.yjbncsAllData;
      if(list!=null && list.length>0){
        if(this.yjbncsLayer!=null){
          //清空图层
          this.yjbncsLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].esName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //经纬度
            let longitude = list[i].esLongitude;
            let latitude = list[i].esLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              allCoordinates.push(lonlat);
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("rgb(127,203,164)",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"应急避难场所",name:name});
              //添加应急避难场所
              this.yjbncsLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.yjbncsLayer!=null){
          //清空图层
          this.yjbncsLayer.getSource().clear();
        }
      }
    },
    //医院图层显示
    showHospitalLayerData(){
      let list = this.hospitalAllData;
      if(list!=null && list.length>0){
        if(this.hospitalLayer!=null){
          //清空图层
          this.hospitalLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].dhName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //经纬度
            let longitude = list[i].dhLongitude;
            let latitude = list[i].dhLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              allCoordinates.push(lonlat);
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              // let style = this.getPointStyleByColor("brown",name,2);
              let style = new Style({
                image: new Icon({
                  src: hospitalImg,
                  anchor: [0.5, 0.5],
                  scale: 0.5
                }),
              });
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"医院",name:name});
              //添加医院
              this.hospitalLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.hospitalLayer!=null){
          //清空图层
          this.hospitalLayer.getSource().clear();
        }
      }
    },
    //房屋抗震能力分区图图层数据显示
    showFwkznlLayerData(){
      let list = this.fwkznlAllData;
      if(list!=null && list.length>0){
        if(this.fwkznlLayer!=null){
          //清空图层
          this.fwkznlLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].kztId;//主键ID
            let kztShockresistance = list[i].kztShockresistance;//抗震能力类型：估计抗震能力达标|疑似抗震能力不足|疑似抗震能力严重不足
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArrayName(this.fwkznlLegendData,kztShockresistance);
            //样式
            let style = this.getPolyonStyle("lightcoral",backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"房屋抗震能力分区图"});
            //添加房屋抗震能力分区图
            this.fwkznlLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
            /*if(geomText!="" && geomText.indexOf("MULTIPOLYGON(((")!=-1){
              let coords_str = geomText.split("MULTIPOLYGON(((")[1].split(")))")[0];
              if(coords_str.indexOf(")),((")!=-1){
                console.log("多个的面");
              }
              let geometries = coords_str.split(")), ((");
              console.log("geometries: ", geometries.length);
              for (let k = 0;k < geometries.length;k++) {
                //console.log(geometries[k]);
                let allPointsArr = [];
                if(coords_str.indexOf("),(")!=-1){
                  console.log("镂空的面");
                }
                let __coords = geometries[k].split("),(");
                console.log("__coords: ", __coords.length);
                for (let m = 0;m < __coords.length;m++) {
                  let _coords = __coords[m].split(","), points = [];
                  //console.log(_coords);
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      points.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  allPointsArr.push(points);
                }
                console.log(allPointsArr);
                //多边形
                let featureTmp = new Feature({
                  geometry: new Polygon(allPointsArr)
                });
                //fwkznlLegendData
                //样式
                let style = this.getPolyonStyle("lightcoral",null);
                featureTmp.setStyle(style);
                //设置属性
                featureTmp.setProperties({id: id,dataType:"房屋抗震能力分区图"});
                //添加房屋抗震能力分区图
                this.fwkznlLayer.getSource().addFeature(featureTmp);
              }
            }*/
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.fwkznlLayer!=null){
          //清空图层
          this.fwkznlLayer.getSource().clear();
        }
      }
    },
    //地形地貌（高程）图层显示
    showDxdmGcLayerData(){
      let list = this.dxdmGcAllData;
      if(list!=null && list.length>0){
        if(this.dxdmGcLayer!=null){
          //清空图层
          this.dxdmGcLayer.getSource().clear();
          console.log("地形地貌（高程）图层显示list");
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.elevationLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].fileUuid;//文件UUID
            let elevationNumber = list[i].elevationNumber;//高程数值
            let geomText = this.getTextFormat(list[i].geom);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArray(legendArray,elevationNumber);
            //样式
            let style = this.getPolyonStyle(backgroundColor,backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"地形地貌（高程）",elevationNumber:elevationNumber});
            //添加地形地貌（高程）
            this.dxdmGcLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dxdmGcLayer!=null){
          //清空图层
          this.dxdmGcLayer.getSource().clear();
        }
      }
    },
    //地形地貌（坡度）图层显示
    showDxdmPdLayerData(){
      let list = this.dxdmPdAllData;
      if(list!=null && list.length>0){
        if(this.dxdmPdLayer!=null){
          //清空图层
          this.dxdmPdLayer.getSource().clear();
          console.log("地形地貌（坡度）图层显示list");
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.slopeLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].fileUuid;//文件UUID
            let slopeNumber = list[i].slopeNumber;//坡度数值
            let geomText = this.getTextFormat(list[i].geom);
            if(geomText===""){
              continue;
            }
            //空间数据
            let featureTmp = new WKT().readFeature(geomText);
            //根据值和图例样式数组获取颜色
            let backgroundColor = this.getColorByLegendArray(legendArray,slopeNumber);
            //样式
            let style = this.getPolyonStyle(backgroundColor,backgroundColor);
            featureTmp.setStyle(style);
            //设置属性
            featureTmp.setProperties({id: id,dataType:"地形地貌（坡度）",slopeNumber:slopeNumber});
            //添加地形地貌（坡度）
            this.dxdmPdLayer.getSource().addFeature(featureTmp);
            //获取范围
            let extent = featureTmp.getGeometry().getExtent();
            if(extent.length==4){
              //全部经纬度--左下角
              allCoordinates.push([extent[0],extent[1]]);
              //全部经纬度--右上角
              allCoordinates.push([extent[2],extent[3]]);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dxdmPdLayer!=null){
          //清空图层
          this.dxdmPdLayer.getSource().clear();
        }
      }
    },
    //获取图例数组
    getLegendArrayByData(legendSelectData){
      //图例设置样式
      let legendArray = [];
      if(legendSelectData!=null && legendSelectData.length>0){
        for(let i=0;i<legendSelectData.length;i++){
          let legendName = legendSelectData[i].name;
          let legendColor = legendSelectData[i].color;
          if(legendName.indexOf("以上")==-1){
            let legendArr = legendName.split("-");
            let minLegend = Number(legendArr[0]);
            let maxLegend = Number(legendArr[1]);
            legendArray.push([minLegend,maxLegend,legendColor]);
          }else{
            let minLegend = Number(legendName.split("以上")[0]);
            let maxLegend = null;
            legendArray.push([minLegend,maxLegend,legendColor]);
          }
        }
      }

      return legendArray;
    },
    //根据值和图例样式数组获取颜色
    getColorByLegendArrayName(legendArray,value){
      let color = null;
      for(let i=0;i<legendArray.length;i++){
        let name = legendArray[i].name;
        if(name==value){
          color = legendArray[i].color;
          break;
        }
      }

      return color;
    },
    //是否开启地图圈选查询
    queryMapEvent(){
      if(this.map!=null){
        if(this.queryMapDrawBool==true){
          //地图工具箱--开启多边形绘制
          this.setMapToolBox("Polygon");
          //test
          //this.getLayerLegend(null);
        }else{
          //地图工具箱--清空
          this.setMapToolBox("Clear");
        }
      }
    },
    getLayerLegend(layerUrl){//根据url获取图层图例信息
      let that = this;
      layerUrl = 'http://10.13.155.192:8090/iserver/services/map-fxfzypg/rest/maps/data_pbe_gdp@fxfzypg/legend.json?bbox=20,10,150,60';
      layerUrl += '&returnVisibleOnly=false';//是否只返回当前地图范围内可见要素的图例。默认为 false
      //图层图例信息查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', layerUrl, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      /**
       * 获取数据后的处理程序
       */
      httpRequest.onreadystatechange = function () {
        console.log(httpRequest);
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          console.log("图层图例信息查询");
          console.log(obj);
          let layerLegends = obj.layerLegends;
          if(layerLegends!=null && layerLegends.length>0){
            let html = '<p style="text-align: center;font-weight: bold;">图例</p>';
            for(let i=0;i<layerLegends.length;i++){
              let layerLegend = layerLegends[i];
              //获取图层名称
              let layerName = that.getLayerRealName(layerLegend.layerName);
              let legends = layerLegend.legends;
              if(legends!=null && legends.length>0){
                if(legends.length>1){//多图例图层
                  html += '<p style="text-align: center;font-weight: bold;">'+layerName+'</p>';
                  for(let j=0;j<legends.length;j++){
                    let legend = legends[j];
                    let values = legend.values;
                    if(values==null){
                      continue;
                    }
                    let imageData = legend.imageData;
                    let contentType = legend.contentType;
                    let url = legend.url;
                    let label = legend.label;
                    let width = legend.width;
                    let height = legend.height;
                    let imgSrc = "data:image/jpeg;base64,"+imageData;
                    //html += '<p style="height: 16px;">';
                    //html += '<p>';
                    html += '<p style="height: '+height+'px;">';
                    html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                    html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+label+'</span>';
                    html += '</p>';
                  }
                }else{//单一图例图层
                  let legend = legends[0];
                  let values = legend.values;
                  let imageData = legend.imageData;
                  let contentType = legend.contentType;
                  let url = legend.url;
                  let label = legend.label;
                  let width = legend.width;
                  let height = legend.height;
                  let imgSrc = "data:image/jpeg;base64,"+imageData;
                  //html += '<p style="height: 16px;">';
                  //html += '<p>';
                  html += '<p style="height: '+height+'px;">';
                  html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                  html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+layerName+'</span>';
                  html += '</p>';
                }
              }
            }
            document.getElementById(that.str+"-legend").innerHTML = html;
          }
        }
      };
    },
    getLayerRealName(label){
      let name = label;
      if(label=="data_pbe@fxfzypg#1"){
        name = '经济公里格网（单位：万元/平方公里）';
      }

      return name;
    },
    //全部图层信息数据
    getAllLayerInfos(){
      let allLayerInfos = {

      }

      return allLayerInfos;
    },
  }
}

</script>

<style scoped>

</style>